<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./lib/react.development.js"></script>
    <script src="./lib/react-dom.development.js"></script>
    <script src="./lib/babel.min.js"></script>
    <style>
        #root button {
            padding: 5px;
            margin: 5px;
        }

        #root button.active {
            background: red;
        }

        #root div {
            width: 500px;
            height: 200px;
            background: green;
        }
    </style>
</head>

<body>
    <!--指定挂载的位置-->
    <div id="root"></div>
    <script type="text/babel">
        class App extends React.Component{
            state={
                index:0,
                newsInfo:[
                            {
                                "newsType":"娱乐",
                                "newsList":[
                                    {
                                        "id":"20220822A03F2V00",
                                        "title":"无人在意的角落，又一届“哥哥们”来贡献互联网笑点了",
                                        "href":"https://new.qq.com/rain/a/20220822A03F2V00"
                                    },
                                    {
                                        "id":"20220822A03F2V02",
                                        "title":"聊“封神宇宙”之前，先做好眼前每一部｜对话《新神榜：杨戬》导演赵霁",
                                        "href":"https://new.qq.com/omn/20220821/20220821A03JWJ00.html"
                                    }
                                ]
                            },
                            {
                                "newsType":"体育",
                                "newsList":[
                                    {
                                        "id":"20220822A03F2V011",
                                        "title":"体育新闻1号",
                                        "href":"https://new.qq.com/rain/a/20220822A03F2V00"
                                    },
                                    {
                                        "id":"20220822A03F2V12",
                                        "title":"体育新闻2号",
                                        "href":"https://new.qq.com/omn/20220821/20220821A03JWJ00.html"
                                    }
                                ]
                            },
                            {
                                "newsType":"财经",
                                "newsList":[
                                    {
                                        "id":"20220822A03F2V21",
                                        "title":"财经新闻1号",
                                        "href":"https://new.qq.com/rain/a/20220822A03F2V00"
                                    },
                                    {
                                        "id":"20220822A03F2V22",
                                        "title":"财经新闻2号",
                                        "href":"https://new.qq.com/omn/20220821/20220821A03JWJ00.html"
                                    }
                                ]
                            }
                        ]
                    }


                    render(){
                        const {index,newsInfo}=this.state;
                        return(
                            <>
                                {
                                    newsInfo.map((item,idx)=>(
                                        <button onClick={()=>this.setState({index:idx})} className={index===idx?'active':''} key={idx}>{item.newsType}</button>
                                    ))
                                }
                                {
                                    newsInfo.map((item,idx)=>(
                                        <div style={{display:idx===index?'block':'none'}} key={idx}>{item.newsList.map(info=>(<p key={info.id}><a href={info.href}>{info.title}</a></p>))}</div>
                                    ))
                                }
                            </>
                        )
                    }
                }
            
                ReactDOM.createRoot(document.querySelector('#root')).render(<App/>)
            
    </script>
</body>

</html>